<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>设备清单</title>
    <link rel="stylesheet" href="../resources/layui/css/layui.css">
    <script src="../resources/layui/layui.js"></script>
    <script src="../resources/flexible/src/flexible.js"></script>
    <script src="../resources/flexible/src/makegrid.js"></script>

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="../resources/weuiTest/css/weui.css"/>
    <link rel="stylesheet" href="../resources/weuiTest/css/weuix.css"/>
    <script src="../resources/weuiTest/js/zepto.min.js"></script>
    <script src="../resources/weuiTest/js/zepto.weui.js"></script>
    <script src="../resources/weuiTest/js/php.js"></script>

    <link rel="stylesheet" href="../resources/iconfont/icon-index.css"/>
</head>
<body class="bd-bg">
<div>
    <div style="margin: 20px 20px 0px 20px;">
        <h1 class="iconfont icon-title padding10-b">客户信息</h1>
        <div>
            <form class="layui-form inner-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">客户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${custName}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">接入号</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${accessNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${eqptTypeName}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">设备总数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${eqptNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">摄像头总数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${cameraNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">在线设备数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${onlineEqptNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">离线设备数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${offlineEqptNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">在线摄像头数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${onlineCameraNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">离线摄像头数</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" value="${offlineCameraNum}" disabled autocomplete="off" class="layui-input width">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="margin: 20px;">
        <h1 class="iconfont icon-title">设备信息</h1>
<%--        <div>--%>
<%--            <table id="content" lay-filter="content"></table>--%>
<%--        </div>--%>
        <div class="weui-panel weui-panel_access padding10-t">
            <div class="weui-panel__bd" id="rank-list">  </div>
            <div class="weui-panel__ft">
                <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
                    <div class="weui-cell__bd" id="getmore">查看更多<i id="loading" class="weui-loading"></i></div>

                </a>
            </div>
        </div>
    </div>
</div>

<script>
    $('#loading').hide();
    var pagesize=10;//每页数据条数
    function ajaxpage(page){
        $.ajax({
            type:"post",
            url:'/app/work/queryDeviceList/'+"${accessNum}"+'/'+page+'/'+pagesize,
            data: {"page":page, "pagesize":pagesize, ajax:2},
            dataType:'json',
            timeout:10000,
            beforeSend:function(xhr){
                $('#loading').show();
            },
            success:function(rs){
                $('#loading').hide();
                var html = "";
                var list = rs.data;
                console.log(list);
                for (var i in list) {
                    html += '<a href="/app/work/toConfigDetail?eqptAcct='+ list[i].eqptAcct +'" class="weui-media-box weui-media-box_appmsg">';
                    html += '<div class="weui-media-box__bd">';
                    html += '<h4 class="weui-media-box__title">设备国标ID: ' + list[i].eqptAcct + '</h4>';
                    html += '<p class="weui-media-box__desc">状态: ' + list[i].onlineDesc + '</p>';
                    html += '</div>';
                    html += '</a>';
                }
                $("#rank-list").append(html);

                var maxpage = Math.ceil(rs.total / pagesize);
                sessionStorage['maxpage'] = maxpage;
                if(page==maxpage){
                    $("#getmore").html("没有更多数据了");return false;
                }
            },
            error:function(xhr){
                alert('ajax出错');
            },
        });
    }

    $(function(){
        var page = 2;
        var maxpage;
        $('#getmore').on('click', function() {
            maxpage = sessionStorage['maxpage'];
            if(page<=maxpage) {
                ajaxpage(page);
                page++;
            }
        });
        ajaxpage(1);
    })
    <%--layui.use('table', function(){--%>
    <%--    var table = layui.table;--%>
    <%--    table.render({--%>
    <%--        elem: '#content'--%>
    <%--        // ,height: 500--%>
    <%--        ,url: '/app/work/queryDeviceList/'+${accessNum} //数据接口--%>
    <%--        // ,page: true //开启分页--%>
    <%--        ,cols: [[ //表头--%>
    <%--            {field: 'id', title: '', width:15, align:'center', templet: '#xuhao', fixed: 'left'}--%>
    <%--            ,{field: 'deviceId', title: '国标ID', width:90, align:'center', sort: true}--%>
    <%--            ,{field: 'channelNum', title: '通道(个)', width:90, align:'center'}--%>
    <%--            ,{field: 'status', title: '状态', width:80, align:'center'}--%>
    <%--            ,{fixed: 'right', title: '操作', toolbar:'#toolbarTemplet',width:60}--%>
    <%--        ]]--%>
    <%--    });--%>
    <%--    table.on('tool(content)', function(obj){--%>
    <%--        var data = obj.data;--%>
    <%--        var id = data.id;--%>
    <%--        if(obj.event == 'detail'){--%>
    <%--            var contenUrl = "<%=basePath%>work/toConfigDetail";// + data.id;--%>
    <%--            window.location.href= contenUrl;--%>
    <%--        }--%>
    <%--    });--%>
    <%--});--%>
</script>
<%--<script type="text/html" id="xuhao">--%>
<%--    {{d.LAY_TABLE_INDEX+1}}--%>
<%--</script>--%>
<%--<script type="text/html" id="toolbarTemplet">--%>
<%--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">详情</a>--%>
<%--</script>--%>
</body>
<style type="text/css">
    .width {
        width: 90%;
    }
</style>
</html>